<template>
  <div v-loading="loading">
    <div class="table">
      <h2>各国疫情数据</h2>
      <el-table :data="tableData" stripe>
        <el-table-column prop="name" label="国家" width="180">
        </el-table-column>
        <el-table-column prop="nowConfirm" sortable label="现存确诊" width="180">
        </el-table-column>
        <el-table-column prop="confirmAdd" sortable label="新增确诊" width="180">
        </el-table-column>
        <el-table-column prop="confirm" sortable label="累计确诊" width="180">
        </el-table-column>
        <el-table-column prop="heal" sortable label="累计死亡">
        </el-table-column>

      </el-table>
    </div>

  </div>
</template>

<script>
import { getStatisticsEarthAPI } from '@/api/index'
export default {
  name: 'StatisticsEarth',
  data() {
    return {
      tableData: [],
      loading: true
    }
  },
  created() {
    this.initStatisticsEarth()
  },
  methods: {
    // 初始化国外疫情数据
    async initStatisticsEarth() {
      const { data: res } = await getStatisticsEarthAPI()
      this.tableData = res.data.WomAboard
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>
.table {
  width: 70vw;
  margin: 0 auto;
  padding: 20px 20px;
  border: 1px solid rgb(221, 221, 221);
  box-shadow: 1px 1px 5px rgb(131, 131, 131);
}
</style>
